/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-26 11:02:02
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Layout } from 'antd';
import './style.less';

export default class Supermarket extends Component {
    constructor(props){
        super(props)
        this.state = {
            type: [{
                name: '产品简介',
                list: ['一、iGuard网页防篡改系统（以下简称iGuard）是保护Web网站不被黑客篡改，并自动恢复被篡改内容的Web页面保护软件。','二、iGuard支持Windows、Linux、Unix等各种主流操作系统，支持部署于各种虚拟化平台及云平台、docker（容器化）、NAS、双机、集群等各种复杂环境，与CMS（内容管理系统）无缝集成，兼容多种发布方式。']
            }, {
                name: '防护效果',
                list: ['一、iGuard采用多重篡改防护手段和事后处理机制，有效应对各种内外部篡改风险，实现高可靠的网页防篡改。','二、iGuard的篡改检测点覆盖网页全生命周期，确保实现无死角的防篡改；同时，采用三种篡改识别机制，确保防篡改机制无法被绕过，并支持四种篡改处理机制，确保不增加运维负担。']
            }, {
                name: '功能说明',
                list: ['一、实时捕获并阻止黑客的篡改行为。','二、在网页文件被访问时进行完整性（是否被篡改）检查。','三、对来自浏览器和中间件的写文件操作进行严格控制。','四、定时扫描关键目录，揪出恶意文件。','五、发布前扫描文件内容，及时发现webshell、非法外链，正本清源。','六、实时阻断篡改攻击：即时拦截对文件的非法修改；阻止在特定位置生成特定类型的文件。','七、隔离（禁止访问）被篡改文件和可疑文件：杜绝被篡改信息的流出，阻止黑客利用后门程序发起进一步攻击。','八、删除可疑文件：清除驻留在Web服务器上的后门程序。','九、自动恢复被篡改文件：自动利用备份文件修复被篡改文件。','十、支持巨量文件和海量数据的稳定可靠传输，发布效率高于FTP等常用发布工具。','十一、发布任务持久化，支持断线和失败重传','十二、支持可定制的一键发布','十三、内嵌lua接口的工具箱满足各种扩展的安全和管理需求，如：服务器状态检测、增量文件备份、定制化扫描文件内容（如：关键字检查）、限制特定文件操作等。','十四、一键诊断系统运行异常','十五、提供详尽的发布异常分析报告','十六、可定制关注的邮件通知','十七、可导入/导出的配置','十八、支持远程操作和维护（如：签发数字水印、启停功能）']
            }, {
                name: '技术优势',
                list: ['一、为了进一步增强网页防篡改的可靠性，iGuard在Web服务器软件/Web中间件内部内嵌了篡改检测模块。篡改检测模块使用密码技术，为网页对象计算出唯一性的数字水印。公众每次访问网页时，都将网页内容与数字水印进行对比；一旦发现网页被非法修改，即进行自动恢复，保证非法网页内容不被公众浏览。','二、此外，iGuard采用定时扫描机制实现在指定时间节点上对指定文件进行篡改检查的功能。对于部署iGuard之前已经存在的网页文件也可以进行篡改检查，同时也支持对于上传目录/文件的内容扫描，使网页防篡改不再局限于篡改事件的事中事后，真正实现了贯穿网站生命周期、全面覆盖网站文件系统的网页防篡改。','三、为了从源头上杜绝篡改隐患，iGuard还提供了一套安全高效的网页文件发布系统。用户只需将待发布的网页文件交给iGuard，iGuard的发布系统会对每个待发布的网页文件进行内容扫描，确保这些文件不包含恶意代码、非法外链等。通过内容扫描确认没有问题的网页文件，将会通过iGuard的发布系统自动发布到Web服务器上。整个过程采用加密传输。']
            }, {
                name: '产品型号'
            }, {
                name: '部署方式'
            }],
            currentIndex: 0
        }
    }
    
    tabToggle(index){
        this.setState({
            currentIndex: index
        })
    } 

    renderDeploy(index){
        if(index === 5){
            return (
                <div>
                    <h1>标准部署</h1>
                    <img src={require('@/static/images/product-1.png')} alt=""/>
                    <h1>集群和冗余部署</h1>
                    <img src={require('@/static/images/product-2.png')} alt=""/>
                    <h1>云主机部署</h1>
                    <img src={require('@/static/images/product-3.png')} alt=""/>
                </div>
            )
        }else if(index === 4){
            return (
                <div>
                    <img src={require('@/static/images/product-4.png')} alt=""/>
                </div>
            )
        }
    }

    render() {
        const { type, currentIndex } = this.state;
        return (
            <Layout.Content className="product">
                <div className="center">
                    <div className="info">
                        <div className="img">
                            <img src={require('@/static/images/super-2.jpg')} alt=""/>
                        </div>
                        <div className="right">
                            <h1>iWall应用防火墙</h1>
                            <p>厂商：上海天存信息技术有限公司</p>
                            <div className="star">
                                <em></em>
                                <em></em>
                                <em></em>
                                <em></em>
                                <em></em>
                            </div>
                            <p className="tit">    iWall应用防火墙（Web应用防护系统）是一款保护Web站点和应用免受来自于应用层攻击的Web防护设备。iWall应用防火墙全面分析应用层的用户http请求数据，区分正常用户访问Web
                            应用和攻击者...</p>
                            <Link to="">收藏</Link>
                        </div>
                    </div>
                    <div className="type">
                        <ul>
                            {
                                type && type.map((item, index) => {
                                    return (
                                        <li className={currentIndex===index ? 'active' : ''} onClick={this.tabToggle.bind(this, index)} key={index}>
                                            {item.name}
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className="context">
                        {
                            type[currentIndex].list && type[currentIndex].list.map((item, index) => {
                                return (
                                    <p key={index}>{item}</p>
                                )
                            })
                        }
                        { this.renderDeploy(currentIndex) }
                    </div>
                </div>
            </Layout.Content>
        );
    }
}